<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS排版布局学习工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier New', monospace;
            background: #f5f5f5;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #333;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .header p {
            color: #666;
            font-size: 1rem;
        }

        .editor-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            width: 100%;
        }

        .editor-panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            aspect-ratio: 4/3;
            display: flex;
            flex-direction: column;
        }

        .panel-header {
            background: #333;
            color: white;
            padding: 15px 20px;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .html-panel .panel-header {
            background: #e34c26;
        }

        .css-panel .panel-header {
            background: #1572b6;
        }

        .preview-panel .panel-header {
            background: #28a745;
        }

        .editor-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 15px;
        }

        .code-editor {
            flex: 1;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            resize: none;
            background: #f8f9fa;
            outline: none;
            transition: border-color 0.3s;
        }

        .code-editor:focus {
            border-color: #007bff;
            background: white;
        }

        .save-btn {
            margin-top: 15px;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .save-btn:hover {
            background: #0056b3;
        }

        .html-panel .save-btn {
            background: #e34c26;
        }

        .html-panel .save-btn:hover {
            background: #c63919;
        }

        .css-panel .save-btn {
            background: #1572b6;
        }

        .css-panel .save-btn:hover {
            background: #0f5788;
        }

        .preview-content {
            flex: 1;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            overflow: auto;
            position: relative;
        }

        .preview-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: white;
        }

        .error-message {
            color: #dc3545;
            font-size: 0.9rem;
            margin-top: 10px;
            padding: 10px;
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 4px;
            display: none;
        }

        .tips {
            margin-top: 30px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .tips h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .tips ul {
            list-style-type: none;
            padding-left: 0;
        }

        .tips li {
            margin-bottom: 10px;
            padding-left: 20px;
            position: relative;
        }

        .tips li::before {
            content: "💡";
            position: absolute;
            left: 0;
        }

        @media (max-width: 1200px) {
            .editor-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .editor-panel {
                aspect-ratio: auto;
                min-height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎨 CSS排版布局学习工具</h1>
            <p>在左侧输入HTML代码，中间输入CSS样式，右侧实时预览效果</p>
        </div>

        <div class="editor-container">
            <!-- HTML编辑器 -->
            <div class="editor-panel html-panel">
                <div class="panel-header">
                    📄 HTML代码
                </div>
                <div class="editor-content">
                    <textarea class="code-editor" id="htmlEditor" placeholder="在此输入HTML代码...">
<div class="container">
    <header class="header">
        <h1>欢迎使用CSS布局工具</h1>
        <p>开始你的布局练习吧！</p>
    </header>
    
    <main class="main-content">
        <div class="box box1">盒子 1</div>
        <div class="box box2">盒子 2</div>
        <div class="box box3">盒子 3</div>
    </main>
    
    <footer class="footer">
        <p>© 2025 CSS学习工具</p>
    </footer>
</div></textarea>
                    <button class="save-btn" onclick="updatePreview()">💾 保存并预览</button>
                    <div class="error-message" id="htmlError"></div>
                </div>
            </div>

            <!-- CSS编辑器 -->
            <div class="editor-panel css-panel">
                <div class="panel-header">
                    🎨 CSS样式
                </div>
                <div class="editor-content">
                    <textarea class="code-editor" id="cssEditor" placeholder="在此输入CSS样式...">
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.header {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.header h1 {
    margin: 0 0 10px 0;
    font-size: 2rem;
}

.main-content {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.box {
    flex: 1;
    min-width: 200px;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.box:hover {
    transform: translateY(-5px);
}

.box1 {
    background: #ff6b6b;
}

.box2 {
    background: #4ecdc4;
}

.box3 {
    background: #45b7d1;
}

.footer {
    text-align: center;
    background: #333;
    color: white;
    padding: 20px;
    border-radius: 8px;
}</textarea>
                    <button class="save-btn" onclick="updatePreview()">💾 保存并预览</button>
                    <div class="error-message" id="cssError"></div>
                </div>
            </div>

            <!-- 预览区域 -->
            <div class="editor-panel preview-panel">
                <div class="panel-header">
                    👁️ 实时预览
                </div>
                <div class="editor-content">
                    <div class="preview-content">
                        <iframe class="preview-iframe" id="previewFrame"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="tips">
            <h3>💡 使用提示</h3>
            <ul>
                <li>修改HTML或CSS代码后，点击"保存并预览"按钮查看效果</li>
                <li>支持所有标准的HTML标签和CSS属性</li>
                <li>可以练习Flexbox、Grid、定位、动画等各种布局技术</li>
                <li>建议从简单的布局开始，逐步增加复杂度</li>
                <li>代码会自动高亮显示，便于阅读和编辑</li>
                <li>预览区域支持响应式布局测试</li>
            </ul>
        </div>
    </div>

    <script>
        function updatePreview() {
            const htmlCode = document.getElementById('htmlEditor').value;
            const cssCode = document.getElementById('cssEditor').value;
            const previewFrame = document.getElementById('previewFrame');
            
            // 清除之前的错误信息
            document.getElementById('htmlError').style.display = 'none';
            document.getElementById('cssError').style.display = 'none';
            
            try {
                // 创建完整的HTML文档
                const fullHtml = `
                    <!DOCTYPE html>
                    <html lang="zh-CN">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <style>
                            body {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                            }
                            *, *::before, *::after {
                                box-sizing: inherit;
                            }
                            ${cssCode}
                        </style>
                    </head>
                    <body>
                        ${htmlCode}
                    </body>
                    </html>
                `;
                
                // 更新iframe内容
                previewFrame.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(fullHtml);
                
            } catch (error) {
                document.getElementById('htmlError').textContent = '代码错误: ' + error.message;
                document.getElementById('htmlError').style.display = 'block';
            }
        }

        // 页面加载时自动预览
        window.addEventListener('load', function() {
            updatePreview();
        });

        // 添加快捷键支持 (Ctrl+S 保存)
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                updatePreview();
            }
        });

        // 添加自动保存功能（可选）
        let autoSaveTimer;
        document.getElementById('htmlEditor').addEventListener('input', function() {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(updatePreview, 1000); // 1秒后自动保存
        });

        document.getElementById('cssEditor').addEventListener('input', function() {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(updatePreview, 1000); // 1秒后自动保存
        });
    </script>
</body>
</html>